<template>
    <div class="music-box">
        <div class="music">
            <div class="music-play-box flex-center">
<!--------------------------------歌曲目录-------------------------->
                <el-drawer
                        title="目录"
                        v-model="showMusicMenu"
                        direction="rtl"
                        :size="400"
                        custom-class="music-menu-drawer"
                        modal="false"
                        destroy-on-close
                        append-to-body="true"
                        close-on-click-modal="true"
                        close-on-press-escape="true"
                        @open="initMusicList"
                >
                    <div v-if="music.musicList.length<1" style="color: white" class="flex-center">暂无歌曲</div>

                    <el-collapse v-model="music.activeMusic" accordion >
                        <el-collapse-item :title="computedMusicName(item.musicName,item.singerName)"
                                          :name="String(index+1)"
                                          v-for="(item,index) in music.musicList"

                        >
<!--                            图片封面显示-->
                            <div style="width: 100%;height: 200px" class="flex-center">
                                <div style="width: 95%;height: 95%">
                                    <YImage :src="item.musicImage" fit="cover" ></YImage>
                                </div>

                            </div>

<!--                            歌名、歌手-->
                            <div class="music-menu-item">
                                <div style="flex: 1" >歌名:{{item.musicName}} </div>
                                <div style="flex:1" class="flex-center"  >
                                    <YButton class="music-play-btn"
                                             :text="videoController.play&&music.currentMusic.id===item.id?'▇▇':'▶'"
                                             @click="chooseMusic(item,index)" >

                                    </YButton>
                                </div>
                                <div  style="flex: 1">作者:{{item.singerName}}</div>
                            </div>

                        </el-collapse-item>
                    </el-collapse>
                </el-drawer>
<!--------------------------------歌曲目录------------------------------------------------------------------>

                <button @click="showMusicMenu=!showMusicMenu" style="z-index: 2;" class="menu-toggle">≣</button>

 <!--           ---------------------------        播放器    -------------------------------- -->

                <div style="width:100%;height: 100%;" class="flex-center-col" >
                    <div style="flex: 8;width: 100%;overflow: hidden;padding: 10px;"
                         class="flex-center">
<!--                        歌曲图片-->
                        <YImage :src="music.currentMusic.musicImage"
                                fit="cover" v-show="music.currentMusic.musicImage"
                                style="width: 95%;height: 80%;position: absolute;left: 2.5%;top: 5%;filter: blur(5px)"
                        >

                        </YImage>
                        <YImage  fit="cover" :src="music.currentMusic.musicImage"  v-show="music.currentMusic.musicImage"
                             class="music-play-image"   >
                        </YImage>
<!--                        <div v-html="music.currentMusic.musicLyric" style="flex: 1;color: white"></div>-->
                    </div>


<!--                    歌曲控制器-->
                    <div style="width: 90%;border-top: 2px solid #7FFFD4"></div>
                    <div style="background-color:#171D20;flex: 2;width: 100%;" class="flex-center">

                        <audio :src="music.currentMusic.musicUrl"
                               :muted="videoController.muted"
                               controls
                               autoplay
                               class="music-video-controller"
                               @ended="playNextMusic"
                               ref="video"></audio>
                    </div>
                </div>
<!--           ---------------------------        播放器    -------------------------------- -->

            </div>


<!--            下方控制器-->
<!--            <div class="music-controller flex-center-end">-->

<!--                <button>◀</button>-->
<!--                <button v-text="videoController.play?'■':'  ▶'" class="start flex-center" @click="playMusic" ></button>-->

<!--                <button >▶</button>-->


<!--                <div class="voice-box">-->
<!--                    <span v-text="videoController.muted?'🔕':'🔔'"  class="voice-btn" @click="mutedVoice"></span>-->
<!--                    <span class="voice" v-show="!videoController.muted">-->
<!--                        <el-slider v-model="voice" style="width: 200px;display: inline-block">-->

<!--                        </el-slider>-->
<!--                    </span>-->
<!--                </div>-->

<!--            </div>-->
        </div>

    </div>
</template>

<script>
    import {computed, reactive, ref} from "@vue/reactivity";
    import {watch} from 'vue'
    import YImage from "@/components/other/YImage";
    import YButton from "@/components/btn/YButton";
    import service from "@/assets/js/service";
    import {errorMessage} from "@/assets/js/utils";

    export default {
        name: "Music",
        components: {YButton, YImage},
        setup(){
            let start=ref(false)
            let muted=ref(false)
            let voice=ref(100)
            let showMusicMenu=ref(false)
            let video=ref()
            let videoController=reactive({
                play:false,
                muted:false
            })
            let music=reactive({
                showMusicController:false,
                activeMusic:'0',
                currentMusic:{
                    index:0,
                    classify:1,
                    collect:0,
                    id:1,
                    musicFormat:"",
                    musicImage:"",
                    musicName:"",
                    musicUrl:"",
                    publish:1,
                    singerName:"",
                    musicLyric:""
                },
                musicList:[
                    {
                        classify:1,
                        collect:0,
                        id:1,
                        musicFormat:"",
                        musicImage:"",
                        musicName:"",
                        musicUrl:"",
                        publish:1,
                        singerName:""

                    }
                ]
            })
            let obj=reactive({


            })

            let computedMusicName=computed(()=>(musicName,singerName)=>{
                if(musicName){
                    const len=musicName.length
                    if(len>20){
                        return '-'+musicName.substring(0,20)+'...'+'——'+singerName
                    }
                }
                return '-'+musicName+'——'+singerName
            })
            let chooseMusic=(item,index)=>{


                // 选择音乐
                music.currentMusic={
                    index:index,
                    ...item
                }
                // 显示音乐控制器
                music.showMusicController=true

                // 更改为播放状态
                // videoController.play=!videoController.play
                playMusic()
            }

// --------------------------------music控制器-------------------------

            // 播放、暂停
            let playMusic=()=>{
                if(videoController.play){
                    // 暂停
                    video.value.pause()
                    videoController.play=false
                }else{
                    // 播放
                    video.value.play()
                    videoController.play=true
                }

                console.log(video)
            }

            // 静音
            let mutedVoice=()=>{
                videoController.muted=!videoController.muted
            }
            // 调控音量
            watch(voice,(newValue)=>{

                video.value.volume=newValue/100.0
            })

            // 自动播放下一首
            let playNextMusic=()=>{
                // 如果还有下一首歌
                let index=music.currentMusic.index
                if(index+1<music.musicList.length){
                    // 播放下一首
                    chooseMusic(music.musicList[index+1],index+1)
                }


            }
// --------------------------------music控制器--------------------------
            let initMusicList= async () => {
                let data = await service.getAllMusics()
                if(data.code===200){
                    music.musicList=data.data
                }else{
                    errorMessage(data.msg)
                }
            }
            return{
                start,
                muted,
                voice,
                videoController,
                showMusicMenu,
                obj,
                initMusicList,
                music,
                video,
                computedMusicName,
                chooseMusic,
                playMusic,
                mutedVoice,
                playNextMusic
            }
        }

    }
</script>

<style scoped lang="less">

    @Music-width:900px;
    @Body-height:800px;
    @Music-imageHeight:600px;
    @Music-controHeight:100px;
    @Music-Margin-Top:10px;
    .music-box{
        width: 100%;
        height: @Body-height;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: var(--theme-color);
        min-width: 1200px;


        .music{

            margin-top:@Music-Margin-Top;
            width: @Music-width;
            height: @Music-controHeight+@Music-imageHeight;
            position: relative;

            /*播放显示*/
            .music-play-box{

                width: @Music-width;
                height:@Music-imageHeight;
                background-color:  transparent;
                border-radius: 10px 10px 0 0;
                overflow: hidden;
                position: relative;
                /*box-shadow: 5px 5px 5px tomato;*/
                border: 2px solid #7FFFD4;

                z-index: 2;
                .music-menu{

                    flex:3;
                    height: 100%;
                    background-color: #7c90a3;
                    border-radius: 10px 0 0 0 ;
                    transition: all 1s;
                    overflow-y: scroll;


                }

                .menu-toggle{
                    width: 30px;
                    height: 35px;
                    float:right;
                    position: absolute;
                    left: 5px;
                    font-size: 20px;
                    border: 1px solid #7FFFD4;
                    background-color:var(--theme-color);
                    color: #7FFFD4;
                    cursor:pointer;

                }
                .menu-toggle:hover{
                    animation: shake 1s ease-in-out infinite alternate;

                }/*播放控制*/
                .music-video-controller{
                    width:90%;
                    height: 50px;

                }

            }
            /*播放控制*/
            .music-controller{
                width: @Music-width;
                height: @Music-controHeight;
                /*background-color: #869cb4;*/
                background-color: #9AB4CD;
                border-radius: 0 0 10px 10px;
                box-shadow: gray 1px 3px 1px;
                .start{

                    width: 80px;
                    height: 80px;
                    border-radius: 80px;
                    background-color: var(--theme-color);
                    color: #00FFFF;
                }
                button{
                    text-align: center;
                    font-size: 30px;
                    width: 100px;
                    height: 50px;
                    border: none;
                    outline: 0;
                    color:  #00FFFF;
                    /*background-color: #e7e3e3;*/
                    background-color: var(--theme-color);
                    margin-left: 20px;
                    border-radius: 10px;
                }
                button:hover{
                    cursor: pointer;
                    background-color: rgba(23, 29, 32, 0.89);
                }
            }
            .voice-box{
                margin:0 50px 0 10px;
                text-align: left;
                width: 300px;
                display: flex;
                align-items: center;

                .voice-btn{
                    position: relative;
                    left:0;
                    width: 50px;
                    height: 100%;
                    margin-right: 10px;
                    font-size: 20px;
                    transition: all 0.3s;
                }
                .voice-btn:hover{
                    cursor: pointer;
                    font-size: 25px;
                }
                .voice{
                    width: 250px;
                    padding: 0 10px 0 10px;
                    border-radius: 5px;
                    transition: all 1s;
                    border:2px solid var(--theme-color);
                    box-shadow: gray 1px 3px 1px ;
                }
            }
        }
        .music::before{
            content: "";
            width: 30px;
            height: 300px;
            position: absolute;
            left: 300px;
            bottom: -100px;
            transform: rotate(45deg);
            background-color: #028090;
        }
        .music::after{
            content: "";
            width: 30px;
            height: 300px;
            position: absolute;
            right: 300px;
            bottom: -100px;
            transform: rotate(-45deg);
            background-color: #028090;

        }


        ::-webkit-scrollbar {
            width: 0px;

        }


    }


    .music-menu-item{
        padding: 10px;
        display: flex;
    }
    .music-play-btn{

    }

    @music-play-image-size:450px;
    //音乐播放时的图片
    .music-play-image{

            width:@music-play-image-size;
            height: @music-play-image-size;

        border-radius: 100%;
        transition: all 0.5s;
        animation: rotate 15s linear infinite;
    }
    .music-play-image:hover{
        cursor: pointer;
        border: 2px solid #7FFFD4;
        width: @music-play-image-size+30px;
        height: @music-play-image-size+30px;

    }
    @keyframes rotate {
        to{

            transform:rotate(360deg) ;
        }
    }
    @keyframes shake {
        50%{
            left: 0px;
        }
        100%{
            left: 10px;
        }
    }

</style>